<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background:red;
            padding:10px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        /* 
        浏览器的渲染
        在渲染的时候遇到link/img/video/audio等都是异步去加载信息(浏览器会分配一个新的线程只执行当前的任务，主线程继续往下走)，但是遇到script、@import，必须是同步加载信息了，当信息加载完成之后，主线程才会继续往下走
    
    
        DOM的回流和重绘
            重绘：元素的样式改变，但是元素的大小，位置，宽高不变
            回流：元素的大小或者位置发生的变化，会触发重新布局，导致render Tree进行重新的布局和渲染
            注意的是：回流一定会引发重绘，但是重绘不会引发回流
    
        
        // 前端性能优化的几个点：
            1、放弃传统的操作DOM的时代，基于react、vue去写你的项目，(特点是数据影响视图的模式，框架内部操作的是虚拟的DOM，还会进行DOM-diff的对比)
    
            2、DOM操作的读写分离
            现代版的浏览器有一个"渲染队列"的机制，如果发现某一行要修改元素的样式，不会立即进行渲染，他要看看下一行是否还要进行元素样式的修改，如果是，那就把上一次的修改样式放到渲染队列里，这个过程一致持续到不是修改样式的操作为止，整体进行一次渲染引发一次回流，
             js中的13个盒子模型和getComputedStyle都会引发渲染队列的刷新

            3、样式的集中改变
                box.style.cssText = 'width:100px;height:100px;padding:10px'
                或者动态增加类名

            4、缓存布局信息
                box.style.width = box.offsetWidth + 1 + 'px';
                box.style.height = box.offsetHeight + 1 + 'px';
                // 渲染两次
                ==>

                let w = box.offsetWidth;
                let h = box.offsetHeight;

                box.style.width = w + 1 + 'px';
                box.style.height = h + 1 + 'px';
                // 渲染一次

            5、文档碎片 cerateDocumentFragment 模板字符串

            6、css3的硬件加速
                比起考虑如果减少回流，那不如直接不让回流发生 transform opacity filter
                以后再js中可以操作元素的transform opacity filter，不会引发重新渲染

            7、牺牲平滑度换取速度
                每过10ms移动1px  如果全长是100px，那这样你的动画就要动100次
                每过17ms移动5px  如果全长是100px，那这样你的动画就要动20次








         */
        // 开始是width80px
        // box.style.width = '100px';
        // console.log(box.offsetWidth);
        // box.style.height = '100px';
        // console.log(box.offsetWidth);
        // box.style.background = 'red';
        // box.style.padding = '10px';
        // 会触发三次渲染

        // box.style.width = '100px';
        // box.style.height = '100px';
        // box.style.background = 'red';
        // box.style.padding = '10px';

        // console.log(box.offsetWidth);
        // console.log(box.offsetWidth);
        // 会触发一次渲染

        // box.style.cssText = 'width:100px;height:100px;padding:10px;background:red';
        // box.style.classList.add('box');


        //-------------------------------------------
        // 5、文档碎片 cerateDocumentFragment ：(存放DOM元素的容器)
        // for(let i = 0;i<4;i++){
        //     let p = document.createElement('p');
        //     p.innerHTML = i;
        //     box.appendChild(p);
        //     // 每执行一次就会触发一次渲染引发一次回流
        // }

        // let frg = document.createDocumentFragment(); // 创建一个容器
        //  for(let i = 0;i<4;i++){
        //     let p = document.createElement('p');
        //     p.innerHTML = i;
        //     frg.appendChild(p);
        // }
        // box.appendChild(frg);
        // 只会触发一次渲染引发一次回流


        // let frg = ``;
        //  for(let i = 0;i<4;i++){
        //     frg+=`<p>${i}<p>`
        // }
        // box.innerHTML = frg;
        // // 只会触发一次渲染引发一次回流
    </script>
</body>

</html>